<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloWorld</title>
    <script src="../assets/js/vue.js"></script>
</head>
<!--由于methods里的tempurature没有加this，找错误找了很久-->
<body>
    <div id="app">
    <div>today's temperature is {{temperature}}</div> 
    <div>suggestion is {{cloth}}</div>
    <button @click="up">up</button><button @click="down">down</button>
    </div>

    <script>
        var suggestion=['naked','T-shirt','jacket'];
        var app = new Vue({
            el:'#app',
            data:{
                temperature:10,
                cloth:'T-shirt'
            },
            methods:{
                up:function(){
                    this.temperature++;
                },
                down:function(){
                    this.temperature--;
                }
            },
            watch:{
                temperature:function(newVal,oldVal){
                    if(newVal>=12){
                        this.cloth=suggestion[0];
                    }else if(newVal<12 && newVal >=10)
                    {
                        this.cloth=suggestion[1];
                    }else{
                        this.cloth=suggestion[2];
                    }
                }
            }
        })
        /*app.$watch('temperature',function(newVal,oldVal){
            if(newVal>=26){
                this.suggestion=suggestion[0];
            }else if(newVal<26 && newVal >=0)
            {
                this.suggestion=suggestion[1];
            }else{
                this.suggestion=suggestion[2];
            }

        })*/
    </script>
</body>
</html>